<template>
	<div class="mall-detail" v-if="data">
		<header class="commodity-header cxo-red white layout fs34rem" v-show="scrollTop > 200">
			<span class="align-center" :class="{ select: view == 1 }" @click="showView(1)">商品</span>
			<span class="align-center" :class="{ select: view == 2 }" @click="showView(2)">详情</span>
			<span class="align-center" :class="{ select: view == 3 }" @click="showView(3)">评价</span>
		</header>

		<div v-show="view == 1">
			<div class="title-btn layout pt20rem pb20rem" v-show="scrollTop < 100" v-if="showAndroid !='1'">
				<i class="iconfont icon-zuojiantouyuanxing ml30rem" style="color:#bfbfbf" @click="$router.back('-1')" v-if="showApp!='1'"></i>
				<div v-else></div>
				<div class="mr30rem">
					<!-- <i class="iconfont icon-1016fenxiangyuanxing"></i> -->
					<i class="iconfont icon-gengduo1"  style="color:#bfbfbf"  @click="sheetVisible = true"></i>
				</div>
			</div>
			<section class="banner">
				<swiper :data="banner" img-key="pic_cover_big" :options="bannerOptions">
				</swiper>
			</section>
		 	<section class="pl30rem pr30rem pt25rem pb25rem border-b20">
		 		<p class="fs32rem c333 bold">{{data.goods_name}}</p>
		 		<div class="layout-juscon mt35rem">
					<div class="price">
						<p class="fs40rem red">￥{{ data.price }}</p>
						<del class="fs26rem c999">原价￥{{ data.market_price }}</del>
					</div>
					<div class="fs26rem c666 flex-end layout"><i>已购买：{{ data.buyer }}人</i></div>
		 		</div>
		 	</section>
			<section  class="rating pl30rem pr30rem border-b20" v-if="starData.length > 0">
		 		<router-link tag="div" :to="'/rating/comment?id='+ goods_id" class="rating-title layout border-b">
		 			<h3 class="fs32rem bold c333">体验评星</h3>
		 			<i class="iconfont icon-right2"></i> 
		 		</router-link>
		 		<div class="rating-son pt20rem pb20rem">
					<div class="flex-left pt10rem pb10rem" v-for="item in starData">
						<span class="fs30rem c333 mr10rem">{{ item.name }}:</span>
						<div class="layout">
							<i class="iconfont icon-xingxing ml15rem orange" v-for = "i in Math.floor(item.score)"></i>
		 					<i class="hollow-star ml15rem" v-for = "i in 5 - Math.floor(item.score)" ></i>
						</div>
					</div>
		 		</div>
		 	</section>
		 	<section class="get-coupon pl30rem pr30rem border-b20">
				<div class="rating-title layout border-b"  @click="loadCoupon">
		 			<h3 class="fs30rem c333">领取优惠券</h3>
		 			<i class="iconfont icon-right2"></i>
		 		</div>
		 		<p class=" fs28rem c666">购买可获得{{ data.give_point }}积分</p>
				<div class=" guarantee layout border-t pt25rem pb25rem">
					<div class="guarantee-son w50 flex-left">
						<i class="iconfont icon-qitianwuliyoutuihuo mr15rem red fs40rem"></i>
						<span class="fs28rem c666">七天无理由退货</span>
					</div>
					<div class="guarantee-son w50 flex-left">
						<i class="iconfont icon-zhengpin mr15rem red fs40rem"></i>
						<span class="fs28rem c666">正品保证</span>
					</div>
				</div>
			</section>
			<section class="get-coupon pl30rem pr30rem border-b20">
				<div class="rating-title layout" @click="popupVisible = true">
		 			<h3 class="fs30rem c333" v-if="selectString">已选</h3>
		 			<h3 class="fs30rem c333" v-else>选择颜色分类尺寸</h3>
		 			<div>
		 				<span class="fs30rem c333" v-if="selectString">{{ selectString }}</span>
		 				<i class="iconfont icon-right2"></i>
		 			</div>
		 		</div>
		 	<!-- 	<div class="rating-title layout border-b">
		 			<h3 class="fs30rem c333">产品参数</h3>
		 			<i class="iconfont icon-right2"></i>
		 		</div> -->
			</section>
			
			<!-- 用户评论 -->
		<!-- 	<section class="get-coupon pl30rem pr30rem border-b20" v-if="commentsData">
				<div class="rating-title layout border-b">
					<h3 class="fs30rem c333 bold">用户评论</h3>
		 			<div class="">
		 				<span>好评度{{ commentsData.praise }}</span>
		 				<i class="iconfont icon-right2"></i>
		 			</div>
				</div>
				<div class="comment layout pt20rem pb20rem" v-if='commentsData.evaluates_count'>
					<router-link tag="button" :to="'/rating?type=0&id='+ goods_id" class="border circle-8 is-on">全部({{ commentsData.evaluates_count.evaluate_count }})</router-link>
					<router-link tag="button" :to="'/rating?type=1&id='+ goods_id" class="border circle-8">好评({{ commentsData.evaluates_count.praise_count }})</router-link>
					<router-link tag="button" :to="'/rating?type=4&id='+ goods_id" class="border circle-8">有图({{ commentsData.evaluates_count.imgs_count }})</router-link>
				</div>
			</section> -->


			<router-link tag="section" :to="'/shop/' + data.shop_id" class="describe pl30rem pr30rem border-b20">
				<div class="describe-title flex-left flex-center pt40rem pb40rem">
					<span class="fs32rem c666 mr15rem">{{ data.shop_name }}</span>
					<div class="star mr30rem layout" v-if="data.shop_credit">
						<i class="iconfont icon-xingxing ml15rem orange" v-for = "i in Math.floor(data.shop_credit)"></i>
						<i class="hollow-star ml15rem" v-for = "i in 5 - Math.floor(data.shop_credit)" ></i>
					</div>
					<i class="iconfont icon-right2 flex-center"></i>
				</div>
				<div class="pb60rem layout">
					<span class="fs26rem c666">描述相符:{{data.shop_desccredit}}</span>
					<span class="fs26rem c666">服务态度:{{ data.shop_servicecredit }}</span>
					<span class="fs26rem c666">发货速度:{{data.shop_deliverycredit}}</span>
				</div>
			</router-link>
			<goods-detail :data="data" v-if="data.rules"></goods-detail>
		</div>
		<div v-show="view == 2" class="pt100rem">
			<header class="commodity-header cxo-red white layout fs34rem">
				<span class="align-center" :class="{ select: view == 1 }" @click="showView(1)">商品</span>
				<span class="align-center" :class="{ select: view == 2 }" @click="showView(2)">详情</span>
				<span class="align-center" :class="{ select: view == 3 }" @click="showView(3)">评论</span>
			</header>
			<goods-detail :data="data" v-if="data.rules"></goods-detail>
		</div>
		<div v-show="view == 3">
			<header class="commodity-header cxo-red white layout fs34rem">
				<span class="align-center" :class="{ select: view == 1 }" @click="showView(1)">商品</span>
				<span class="align-center" :class="{ select: view == 2 }" @click="showView(2)">详情</span>
				<span class="align-center" :class="{ select: view == 3 }" @click="showView(3)">评论</span>
			</header>
			<div class="comment-rating pt100rem" v-if="starData.length > 0"> 
				<section class="pl30rem pr30rem border-b20">
					<router-link tag="div" :to="'/rating/comment?id='+ goods_id" class="rating-title layout border-b">
			 			<h3 class="fs32rem bold c333">体验评星</h3>
			 			<i class="iconfont icon-right2"></i> 
			 		</router-link>
			 		<div class="rating-son pt20rem pb20rem">
						<div class="flex-left pt10rem pb10rem" v-for="item in starData">
							<span class="fs30rem c333 mr10rem">{{ item.name }}:</span>
			 				<div class="layout">
			 					<i class="iconfont icon-xingxing ml15rem orange" v-for = "i in Math.floor(item.score)"></i>
			 					<i class="hollow-star ml15rem" v-for = "i in 5 - Math.floor(item.score)"></i>
			 				</div>
						</div>
			 		</div>
		 		</section>
		 		<section class="get-coupon pl30rem pr30rem border-b20" v-if="commentsData">
					<div class="rating-title layout border-b">
						<h3 class="fs30rem c333 bold">用户评论</h3>
			 			<div class="">
			 				<span>好评度{{ commentsData.praise }}</span>
			 				<i class="iconfont icon-right2"></i>
			 			</div>
					</div>
					<div class="comment layout pt20rem pb20rem" v-if='commentsData.evaluates_count'>
						<button class="border circle-8" :class="{on:comments_type == 0}" @click="loadInitData('0')">全部({{ commentsData.evaluates_count.evaluate_count }})</button>
						<button  class="border circle-8" :class="{on:comments_type == 1}" @click="loadInitData('1')">好评({{ commentsData.evaluates_count.praise_count }})</button>
						<button  class="border circle-8" :class="{on:comments_type == 4}" @click="loadInitData('4')">有图({{ commentsData.evaluates_count.imgs_count }})</button>
					</div>
				</section>
		 		<section class="rating-content pl30rem pr30rem pb100rem" v-if="commentData.length > 0">
		 			<h3 class="fs32rem c333 bold">体验评价</h3>
					<div class="layout-juscon pb30rem" v-for="item in commentData">
						<img class="user-img circle" :src="img_url + item.user_img" alt="">
						<div class="ml20rem flex_1"> 
							<div class="layout border-b pb30rem">
								<div class="title-left">
									<div class="flex-left">
										<strong class="fs34rem c333 mr15rem">{{ item.user_name }}</strong>
										<span class="fs18rem white pt5rem pb5rem pl30rem pr10rem primary" v-if="item.growth_level == 1"></span>
										<span class="fs18rem white pt5rem pb5rem pl30rem pr10rem intermediate" v-if="item.growth_level == 2"></span>
										<span class="fs18rem white pt5rem pb5rem pl30rem pr10rem advanced" v-if="item.growth_level == 3"></span>
									</div>
								
									<p class="fs24rem c999 mt20rem">{{ item.goods_name }}</p>
								</div>
								<div v-if="item.score">
									<p class="fs24rem c999 mb20rem align-center">{{item.addtime*1000,'yyyy-MM-dd'| formatDate  }}</p>
									<div class='layout'>
										<i class="iconfont icon-xingxing orange" v-for="i in Math.floor(item.score)"></i>
										<i class="hollow-star ml15rem" v-for = "i in 5 - Math.floor(item.score)"></i>
									</div>
								</div>
							</div>
							<p class="fs30rem c333 bold pt30rem pb30rem">{{ item.content }}</p>
							<div class="img-list">
								<ul>
									<li v-for="items in item.image">
										<img class="responsive-img" :src="img_url + items" alt="">
									</li>
								</ul>
							</div>
					<!-- 		<router-link tag='button' :to="'/rating/all/' + goods_id" class="comment-btn circle-8 pl30rem pr30rem pt20rem pb20rem fs28rem c333">查看他所有评价</router-link> -->
						</div>			
					</div>
		 		</section>
			</div>
		</div>

		<footer class="commodity-footer bg-white layout" v-show="showAndroid !='1'">
			<div class="text-btn layout-juscon pl10rem pr10rem border-t">
				<router-link tag='span' :to="'/shop/'+ data.shop_id" class="fs24rem c666 pl15rem pr15rem">店铺</router-link>
				<span class="fs24rem c666 pl15rem pr15rem" @click="contact"> <!-- <a :href="'tel:'+ data.phone"></a> -->联系卖家</span>
				<span class="fs24rem c666 pl15rem pr15rem" :class="{ onAttention:isAttention }" @click="attention">关注</span>
			</div>
			<div class="commodity-btn layout">
				<button class="bg-deep-orange white" @click="add">加入购物车</button>
				<button class="bg-red white" @click="pay">立即支付</button>
			</div>
		</footer>

		<!-- 选择颜色分类尺寸 -->
		<popup v-model="popupVisible" position="bottom" class="w100">
			<div class="pl30rem pr30rem pb20rem">
				<div class="shop flex-left pt30rem pb30rem border-b">
					<img :src="specificationImg"  alt="">
					<div class="shop-text ml30rem">
						<p class="fs28rem c333 mb20rem bold">{{ data.goods_name }}</p>
						<span class="fs28rem c999"v-if="stock">库存:{{ stock }}</span>	
						<span class="fs28rem c999"v-else>库存:{{ data.stock }}</span>	
						<span class="block fs28rem c999 mb25rem" v-if="selectString <= 1">请选择规格数量</span>
						<span class="block fs28rem c999 mb25rem" v-else>规格：{{ selectString }}</span>
						<strong class="fs30rem red" v-if="price">￥{{ price }}</strong>
						<strong class="fs30rem red" v-else>￥{{ data.price }}</strong>
					</div>
				</div>
				<div class="couponList">
					<div class="specification">
						<div v-for="(item,n) in data.spec_list">
							<h3 class="pt15rem pb15rem fs30rem c333">{{ item.spec_name}}</h3>
							<ul class="flex-left pt15rem pb15rem border-b">
								<li class="fs28rem c333 border circle-8 pt15rem pb15rem pl25rem pr25rem mr15rem" :class="{ on : subIndex[n] == index }" v-for="(items,index) in item.value" @click="selectCate(items,n,index)">{{ items.spec_value_name }}
								</li>
							</ul>
						</div>
					</div>
					<div class="mt30rem mb30rem">
						<h3 class="pt15rem pb15rem fs30rem c333">数量</h3>
						<div class="layout quantity">
							<i class="iconfont icon-jian1" v-if="quantity == 1"></i>
							<i class="iconfont icon-jian1" @click="quantity--" v-else></i>
							<input type="text" v-model="quantity">
							<i class="iconfont icon-jia1"  @click="quantity++"></i>
						</div>
					</div>
					<button class="btn w100 align-center block cxo-red fs34rem white circle-8" @click="ascertain()">确定</button>
				</div>
			</div>
		</popup>

		<!-- 领取优惠券 -->
		<popup v-model="popupShow" position="bottom" class="w100">
			<div class="coupon">
				<h2 class="fs34rem c333 bold align-center">领取优惠券<i class="iconfont icon-guanbi" @click="popupShow = false"></i></h2>
				<ul class="couponList" style="max-height:22rem;overflow-y: scroll;">
					<li class="pl30rem pr30rem pt40rem pb40rem layout-juscon border-t" v-for="item in couponList">
						<div class="li-left">
							<strong class="fs34rem cxo-red-color bold">{{ item.money }}元</strong>
							<p class="fs26rem c666 mb15rem mt20rem">{{ item.tips }}</p>
							<p class="fs24rem c999">使用期限:{{ item.start_time * 1000,'yyyy.MM.dd' | formatDate }}-{{item.end_time * 1000,'yyyy.MM.dd' | formatDate }}</p>
						</div>
						<button class="get-btn cxo-red white circle-8" @click="getCoupon(item)">领取</button>
					</li>
				</ul>
			</div>
		</popup>
		<actionsheet :actions="actions" v-model="sheetVisible"></actionsheet>
		
	</div>
</template>

<script>
	import { getRules } from '@/api/rules';
	import { getXPDetail, getCommentsCount,  getGoodsComments } from "@/api/goods-detail";
	import { addCart, getCouponList, receiveCoupon, addAttention, delAttention, isAttention } from "@/api/shopping-cart";
	import { getStar } from "@/api/rating";
	import Swiper  from "@/components/Swiper";
	import Countdown from '@/components/Countdown';
	import GoodsDetail from "@/components/Goods-detail";
	import { Popup,Actionsheet } from 'mint-ui';
	import $toast from '@/utils/toast';
	import { formatDate } from "@/utils";
	import md5 from 'js-md5';

	export default{
		components:{
			Swiper,
			Countdown,
			GoodsDetail,
			Popup,
			Actionsheet
		},
		mounted()
		{
			window.addEventListener('scroll', this.handleScroll);
		},
		
		data()
		{
			return{
				popupShow        : false,
				popupVisible     : false,
 				countdownType    : false,
 				sheetVisible  	 : false,
 				showAndroid      : this.$route.query.isapp,
				showApp          : window.sessionStorage.getItem('isapp'),
				goods_id         : this.$route.params.id,
				actions       	 : [{name:'投诉该商品',method : this.complaint}],
				uid              : window.localStorage.getItem('uid'),
				data             : [],
				starData         : [],
				commentsData     : [],
				banner           : [],
				select_id        : [],
				selectArr_id     : [],
				subIndex         : [],
				selectArr        : [],
				canselect        : [],
				couponList       : [],
				commentData      : [],
				price            : '',
				stock            : '',
				selectString     : '',
				scrollTop        : '',
				specificationImg : '',
				isAttention      : '',
				parameterName    : '',
				sku_id           : '',
				quantity         : 1,
				view             : 1,
				comments_type    : 0,
				page_index       : 1,
				page_size        : 10,
				img_url          : process.env.IMG_URL,
				bannerOptions:{
					slidesPerView :'auto',
					loopedSlides  :'auto',
					autoplay: {
						delay: 5000,
					},
					pagination: {
				    	el: '.swiper-pagination',
				    	bulletClass : 'my-red',
					},
				}
			}
		},
		filters:
		{
			formatDate(time,fmt){
				let date = new Date(time);
				return formatDate(date,fmt);
			}  
		},
		created()
		{
    		window.scrollTo(0,0);
    		this.loadData();
		},
		watch:
		{
			select_id(newVal)
			{
				this.canselect = this.data.sku_list.filter(res => res.attr_value_items.indexOf(newVal)>-1);
				if(this.canselect.length == 1)
				{
					if(this.type=='ping')
						this.price = this.canselect[0].ping_price;
					else
						this.price = this.canselect[0].price;

					this.stock = this.canselect[0].stock;
					this.sku_id = this.canselect[0].sku_id;
				}
				else
				{
					this.price = '';
					this.stock = '';
					this.sku_id = '';
				}
			}
		},
		methods:
		{
			contact()
			{
				if(!this.uid){
					this.showapp && iosapp('ExperienceLoginAction');
					this.$router.replace('/login?redirect=' + $router.currentRoute.fullPath);
				}
				else if(this.showApp)
				{
					let params = {
						username : this.data.jiguang_username
					}
					iosapp('getJim',params)
				}
				else
					this.$router.push('/jim?nickname='+ this.data.jiguang_username)
			},
			// 页面置顶
			handleScroll()	 
			{
			  this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
			},
			// 获取数据
			loadData()
			{
				this.loadDetail();
				this.loadStar();
	    		this.loadComments();
	    		this.judgeAttention();
	    		this.loadCommentData();
			},
			loadDetail()
			{
				getXPDetail(this.goods_id).then( res => {
					this.banner = res.data.img_list;
					this.specificationImg = this.img_url + res.data.img_list[0].pic_cover_small;
					this.data = res.data;
				})
			},
			loadStar()
			{
				getStar(this.goods_id , '0').then( res => {
					this.starData = res.data;
				})
			},
			loadComments()
			{
				getCommentsCount(this.goods_id).then( res => {
					this.commentsData = res.data;
				})
			},
			loadCoupon()
			{
				getCouponList(this.uid,this.data.shop_id).then(res=>{
					if( res.data.length > 0){
						this.couponList = res.data;
						this.popupShow = true;
					}
					else
						$toast('暂无优惠券')
				})
			},
			loadCommentData()
			{
				var params = {
					goods_id      : this.goods_id,
					comments_type : this.comments_type,
					page_index    : this.page_index++,
					page_size     : this.page_size
				}
				getGoodsComments(params).then( res => {
					this.commentData = res.data;
				})
			},
			// 领取优惠券
			getCoupon(item)
			{
				var params = {
					uid            : this.uid,
					shop_id        : item.shop_id,
					coupon_type_id : item.coupon_type_id
				}
				receiveCoupon(params).then(res => {
					$toast('领取成功');
				})
			},

			// 规格选中
			selectCate(item,n,index)
			{ 
				if (this.selectArr[n] != item.spec_value_name) 
				{
	                this.selectArr_id[n] = item.spec_id + ':' + item.spec_value_id;
	                this.selectArr[n] = item.spec_value_name;
	                this.subIndex[n] = index;
	            }
	            else
	            {
	                this.selectArr[n] = "";
	                this.subIndex[n] = -1; //去掉选中的颜色 
            	}
				this.$forceUpdate();
				this.select_id = this.selectArr_id.join(';')
				this.selectString = this.selectArr.join(' '); 
				if(item.spec_img)
					this.specificationImg = this.img_url + item.spec_img;
			},

			//判断关注状态
			judgeAttention()
			{
				if(!this.uid)
					return;

				var params = {
					fav_id : this.goods_id,
					fav_type: 'goods',
					uid : this.uid
				}
				isAttention(params).then( res => {
					if(res.data == 1){
						this.isAttention = true;
					}
					if(res.data == 0){
						this.isAttention = false;
					}
				})
			},
			//关注取消，添加
			attention()
			{
				if(!this.uid){
					 return this.$router.replace('/login?redirect=' + this.$router.currentRoute.fullPath);
				}

				var params = {
					fav_id : this.goods_id,
					fav_type: 'goods',
					uid : this.uid
				}
				if(this.isAttention){

					delAttention(params).then( res => {
						this.isAttention = false;
					})
				}
				else
				{
					addAttention(params).then( res => {
						this.isAttention = true;
					})
				}
			},

			//判断规格，库存。
			ascertain()
			{
				if(this.data.spec_list.length > 0 && this.data.stock > 0 )
				{
					if(this.canselect.length != 1)
						return $toast('请选择规格数量');

					if(this.parameterName == 'add')
						return this.add();

					if(this.parameterName == 'pay')
						return this.pay();

					return this.popupVisible = false;
				}
				else
				{
					if(this.data.stock > 0){
						this.sku_id = this.data.sku_list[0].sku_id;
					}
					else
					{
						this.popupVisible = false;
						return $toast('库存不足');
					}

					if(this.parameterName == 'add')
						return this.add();

					if(this.parameterName == 'pay')
						return this.pay();

					return this.popupVisible = false;
				}
			},
			// 加入购物车
			add()
			{
				this.parameterName = 'add';

				if(!this.sku_id)
					return this.popupVisible = true;

				var params = {
					uid        : this.uid,
					sku_id     : this.sku_id,
					goods_type : 1,
					quantity   : this.quantity
				}
				addCart(params).then( res => {
					$toast('已加入购物车');
					this.popupVisible = false;
				})
			},
			//立即支付
			pay()
			{
				this.parameterName = 'pay';

				if(!this.sku_id)
				{
					return this.popupVisible = true;
				}
				else
				{
					var skuList = this.sku_id+':'+this.quantity
					this.$store.dispatch("skuidList", skuList);
					this.$router.push('/shopping/pay?type=0')
				}
			},

			showView(num)
			{
				this.view = num;
			},

			loadInitData(num)
			{
				this.comments_type = num;
				this.page_index = 1;
				this.loadData();
			},
			complaint()
			{
				this.$router.push('/complaint?goods_id=' + this.goods_id);
			}
		}
	}
</script>

<style lang="less">
	.mall-detail{
		.swiper-container{
			.swiper-wrapper{
				height: 700/28rem;
				img{
					width: 100%;
					height: 100%;
					display: block;
					object-fit:cover;
				}
			}
		}
		.commodity-header{
			height: 90/28rem;
			line-height: 90/28rem;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 999;
			span{
				width: 33.333%;
			}
			.select{
				position: relative;
			}
			.select:before{
				content:'';
				display: block;
				width: 40%;
				height: 3/28rem;
				background-color: white;
				position: absolute;
				left: 50%;
				bottom: 10%;
				transform: translate(-50%,50%);
			}
		}
		.title-btn{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 9;
			i{
				font-size: 60/28rem;
			}
		}
		.banner{
			position:relative;
			.swiper-pagination-bullets{
				bottom:100/28rem !important;
			}
			.count-time{
				position: absolute;
				bottom: 0;
				left:0;
				width: 100%;
				z-index: 99;
				display: block;
				text-align:center;
			}
			.count-down-two{
				height: 80/28rem;
				line-height: 80/28rem;
				background: rgba(255,0,0,.8);
				color: #fff;
				font-size: 34/28rem;
			}
		}
		.rating-title{
			height: 90/28rem;
			line-height: 90/28rem;
		}
		.get-coupon{
			p{
				height: 90/28rem;
				line-height: 90/28rem;
			}
		}
		.coupon{
			h2{
				height: 110/28rem;
				line-height: 110/28rem;
			}
			ul{
				li{
					.get-btn{
						height: 60/28rem;
						line-height: 60/28rem;
						width: 140/28rem;
					}
				}
			}
		}
		.comment{
			button{
				border-color: #a3a3a3;
				width: 30%;
				height: 60/28rem;
				line-height: 60/28rem;
			}
			.is-on{
				border: 1px solid transparent;
				background-color: #ff0036;
				color: #fff;
			}
		}
		.mint-popup{
			.shop{
				img{
					width: 160/28rem;
					height: 160/28rem;
					object-fit: cover;
				}
			}
			.specification{
				overflow-y: scroll;
				ul{
					li{
						border-color:#666;
					}
					.on{
						border: 1px solid transparent;
						background-color: #ff0036;
						color: #fff;
					}
				}
			}
			.quantity{
				width: 200/28rem;
			}
			.btn{
				height: 90/28rem;
				line-height: 90/28rem;
			}
		}
		.goods-detail{
			height: 90/28rem;
			line-height: 90/28rem;
			.select-color{
				font-weight: 600;
				color: #333;
				position: relative;
			}
			.select-color:after{
				content: "";
				display: block;
				background-color: #ff0036;
				height: 6/28rem;
				width: 100%;
				position: absolute;
				bottom: -0;
				left: 0;
			}
		}
		.comment-rating{
			.title{
				height: 90/28rem;
				line-height: 90/28rem;
			}
			.rating-title{
				ul{
					li{
						height: 90/28rem;
						line-height: 90/28rem;
					}
				}
			}
			.rating{
				line-height: 90/28rem;
			}
			.comment{
				button{
					border-color: #a3a3a3;
					width: 30%;
					height: 60/28rem;
					line-height: 60/28rem;
				}
				.on{
					border: 1px solid transparent;
					background-color: #ff0036;
					color: #fff;
				}
			}
			.rating-content{ 
				h3{
					height: 90/28rem;
					line-height: 90/28rem;
				}
				.user-img{
					width: 88/28rem;
					height: 88/28rem;
					object-fit: cover;
					border-radius: 50%;
				}
				.rating-title{
					.title-left{
						span{
							width: 124/28rem;
							height: 33/28rem;
							display: block;
						}
						.primary{
							background: url(../../assets/icon8.png)no-repeat center /100% 100%;
						}
						.intermediate{
							background: url(../../assets/icon10.png)no-repeat center /100% 100%;
						}
						.advanced{
							background: url(../../assets/icon9.png)no-repeat center /100% 100%;
						}
					}
				}
				.img-list{
					ul{
						display: grid;
						grid-template-columns: 1fr 1fr 1fr;
						grid-gap: 0.5rem;
						li{
							img{
								width: 186/28rem;
								height: 186/28rem;
								object-fit: cover;
							}
						}
					}
				}
				.comment-btn{
					border: 2px solid #666;
					display: block;
					margin:0 auto;
					margin-top: 40/28rem;
				}
			}
		}
		.commodity-footer{
			height:100/28rem;
			line-height: 100/28rem; 
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			.text-btn{
				width: 46%;
				height: 100%;
				span{
					padding-top: 30/28rem;
					background-position: center 25%;
			        background-size: 44/28rem;
			        background-repeat: no-repeat;
			        &:nth-child(1){
					background-image: url(../../assets/icon1.png)
					}
					&:nth-child(2){
						background-image: url(../../assets/icon2.png)
					}
					&:nth-child(3){
						background-image: url(../../assets/icon3.png)
					}
				}
				.onAttention{
					&:nth-child(3){
						background-image: url(../../assets/details_star_img.png)
					}
				}
				
			}
			.commodity-btn{
				width: 52%;
				height: 100%;
				button{
					height: 100%;
					width: 50%;
				}
			}
		}
		.mint-popup{
			width: 100%;
			h2{
				position: relative;
				i{
					position: absolute;
					right: 10%;
					top: 50%;
					transform: translate(50%,-50%);
				}
			}
			.popup-button{
				height: 100/28rem;
				line-height: 100/28rem;
				span{
					border-right-color: #d7d7d7;
				}
			}
		}
		.couponList{
			max-height: 450/28rem;
			overflow-y: scroll; 
		}
		.mint-toast{
			z-index: 9999;
		}
	}
	

</style> 